<template>
    <div>
        <el-container>
            <el-header>文字参数设定</el-header>
            <el-main>
                <el-form :inline="true" :modal='fontparam'>
                    <el-form-item label="字体名称">
                        <el-select v-model="fontparam.fontName" filterable allow-create placeholder="请选择">
                            <el-option v-for="item in systemfonts" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字体大小">
                        <el-input v-model="fontparam.fontSize">
                            <template slot="append">磅</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="字体样式">
                        <el-select v-model="fontparam.fontStyle" filterable placeholder="请选择">
                            <el-option v-for="item in fontstyles" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="旋转角度">
                        <el-input v-model="fontparam.degree">
                            <template slot="append">度</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="字体颜色">
                        <el-color-picker v-model="fontparam.color" show-alpha :predefine="predefineColors"
                                         @change="showFontBackgroundcolor"></el-color-picker>
                        <el-color-picker v-model="fontparam.endColor" show-alpha :predefine="predefineColors"
                                         @change="showFontBackgroundEndColor"></el-color-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click='submitFontParam'>设定字体</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="text" @click='showFont'>水印示例</el-button>
                    </el-form-item>
                </el-form>
                <el-dialog title="水印字体示例" :visible.sync="dialogVisible" width="30%">
                    <span :style="fontcss">水印字体</span>
                    <span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">关闭</el-button>
					</span>
                </el-dialog>
            </el-main>
        </el-container>
        <ImageUpload></ImageUpload>
    </div>
</template>

<script>
    import qs from "qs"
    import ImageUpload from '@/components/ImageUpload.vue'

    export default {
        name: "WordMark",
        components: {
            ImageUpload
        },
        data: function () {
            return {
                dialogVisible: false,
                systemfonts: [],
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585'
                ],
                fontstyles: [{
                    value: 0,
                    label: '普通'
                },
                    {
                        value: 1,
                        label: '粗体'
                    },
                    {
                        value: 2,
                        label: '斜体'
                    }
                ],
                fontparam: {
                    fontName: '',
                    fontSize: 0,
                    fontStyle: 0,
                    degree: 45,
                    alpha: 1.0,
                    color: 'rgba(210,247,16,1)',
					endColor: 'rgba(247,22,3,1)'
                },
                fontcss: {
                    "font-family": "宋体",
                    "font-size": "14px",
                    "color": "rgba(0,0,0,1)",
                    "font-style": "normal",
                    "font-weight": "normal",
                    "transform": "rotate(0deg)",
                    "display": "block",
                    "margin": "6% auto",
                    "width": "60px",
                    "background-color": "rgba(255,255,255,0)",
                    "background-image": "-webkit-repeating-linear-gradient(-30deg, rgba(210,247,16,1), rgba(247,22,3,1))",
                    "-webkit-text-fill-color": "transparent",
                    "-webkit-background-clip": "text"
                },
                blackBackgroundcolor: false
            };
        },
        created: function () {
            this.getSystemFont();
            this.getCurrentFontParam();
        },
        methods: {
            getSystemFont() {
                this.axios.get('/font/systemfont').then(response => {
                    let data = response.data;
                    if (data.code == 1) {
                        this.$message.error(data.msg);
                    } else {
                        this.systemfonts = data.data;
                    }
                });
            },
            getCurrentFontParam() {
                this.axios.get('/font/param').then(response => {
                    this.$options.methods.setFontParam(response, this, false);
                });
            },
            setFontParam(response, obj, notice) {
                let data = response.data;
                if (data.code == 1) {
                    obj.$message.error(data.msg);
                } else {
                    obj.fontparam.fontName = data.data.fontName;
                    obj.fontparam.fontSize = data.data.fontSize;
                    obj.fontparam.fontStyle = data.data.fontStyle;
                    obj.fontparam.color = "rgba(" + data.data.color + "," + data.data.alpha + ")";
					obj.fontparam.endColor = "rgba(" + data.data.endColor + "," + data.data.alpha + ")";
                    obj.fontparam.degree = data.data.degree;
                    obj.fontparam.alpha = data.data.alpha;
                    if (notice) {
                        obj.$message.success(data.msg);
                    }
                }
            },
            submitFontParam() {
                let data = this.fontparam;
                let tempcolor = data.color.substring(5, data.color.length - 1);
                let temparr = tempcolor.split(",");
                data.color = temparr[0] + "," + temparr[1] + "," + temparr[2];

                let tempEndColor = data.endColor.substring(5, data.endColor.length - 1);
                let tempEndArr = tempEndColor.split(",");
                data.endColor = tempEndArr[0] + "," + tempEndArr[1] + "," + tempEndArr[2];

                data.alpha = parseFloat(temparr[3]);
                this.axios.post('/font/set', qs.stringify({...data})).then(response => {
                    this.$options.methods.setFontParam(response, this, true);
                });
            },
            showFontBackgroundcolor() {
                let colordata = this.fontparam.color;
                let tempcolor = colordata.substring(5, colordata.lastIndexOf(","));
                let tempcolorarr = tempcolor.split(",");
                tempcolorarr.forEach(element => {
                    element = parseInt(element);
                    if (element <= 255 && element >= 230) {
                        this.blackBackgroundcolor = true;
                        return false;
                    } else {
                        this.blackBackgroundcolor = false;
                    }
                });
            },
            showFontBackgroundEndColor() {
                let colordata = this.fontparam.endColor;
                let tempcolor = colordata.substring(5, colordata.lastIndexOf(","));
                let tempcolorarr = tempcolor.split(",");
                tempcolorarr.forEach(element => {
                    element = parseInt(element);
                    if (element <= 255 && element >= 230) {
                        this.blackBackgroundcolor = true;
                        return false;
                    } else {
                        this.blackBackgroundcolor = false;
                    }
                });
            },
            showFont() {
                this.dialogVisible = true;
                this.fontcss.fontFamily = this.fontparam.fontName;
                this.fontcss.fontSize = parseInt(this.fontparam.fontSize * 4 / 3) + "px";
                this.fontcss.color = this.fontparam.color;
				this.fontcss.backgroundImage = `-webkit-repeating-linear-gradient(-30deg, ${this.fontparam.color}, ${this.fontparam.endColor})`;
				this.fontcss.transform = "rotate(" + this.fontparam.degree + "deg)";
                this.fontcss.width = (parseInt(this.fontparam.fontSize * 4 / 3) * 4 + 4) + "px";
                if (this.blackBackgroundcolor) {
                    this.fontcss.backgroundColor = "rgba(0, 0, 0, 1)";
                } else {
                    this.fontcss.backgroundColor = "rgba(255, 255, 255, 1)";
                }
                switch (this.fontparam.fontStyle) {
                    case 1:
                        this.fontcss.fontStyle = "normal";
                        this.fontcss.fontWeight = "bold";
                        break;
                    case 2:
                        this.fontcss.fontStyle = "italic";
                        this.fontcss.fontWeight = "normal";
                        break;
                    case 0:
                    default:
                        this.fontcss.fontStyle = "normal";
                        this.fontcss.fontWeight = "normal";
                        break;
                }
            }
        }
    }
</script>

<style scoped>

</style>
